<template>
  <div class="block-wrap">
    <div class="title">
      <span class="bar"></span>
      <span class="text">商户信息</span>
    </div>
    <div class="block-wrap">
      <div class="content-wrap">
        <el-descriptions v-if="detailInfo" :column="3" border>
          <el-descriptions-item align="center" label="状态" label-align="right" label-class-name="my-label">
            <dict-tag :options="audit_status" :value="detailInfo.auditStatus"/>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="平台商户号" label-align="right" label-class-name="my-label">
            {{ detailInfo.outMerchantNo }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="入网类型" label-align="right" label-class-name="my-label">
            <dict-tag :options="laiqianle_register_type" :value="detailInfo.netType"/>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="是否直接接入" label-align="right" label-class-name="my-label">
            {{ detailInfo.isDirectConnect ? '直接接入' : '非直接接入' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="商户名称" label-align="right" label-class-name="my-label">
            {{ detailInfo.merchantName }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="商户简称" label-align="right" label-class-name="my-label">
            {{ detailInfo.shortName }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="执照类型" label-align="right" label-class-name="my-label">
            <dict-tag :options="laiqianle_license_type" :value="detailInfo.licenceType"/>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="执照编号" label-align="right" label-class-name="my-label">
            {{ detailInfo.licenceNo }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="执照有效期" label-align="right" label-class-name="my-label">
            {{ detailInfo.licenceExpireDate }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="经营范围" label-align="right" label-class-name="my-label">
            {{ detailInfo.manageScope }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="经营类目" label-align="right" label-class-name="my-label">
            {{ handleFilter(businessTypeOptions, detailInfo.manageTypeId + '', 'code') }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="省市区" label-align="right" label-class-name="my-label">
            {{ handleFilter(provincesList, detailInfo.addressinfoId.province, 'id') }} -
            {{ handleFilter(provincesList, detailInfo.addressinfoId.city, 'id') }} -
            {{ handleFilter(provincesList, detailInfo.addressinfoId.district, 'id') }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="商户地址" label-align="right" label-class-name="my-label">
            {{ detailInfo.addressinfoId.address }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="证件类型" label-align="right" label-class-name="my-label">
            <dict-tag :options="laiqianle_card_type" :value="detailInfo.lepCertType"/>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="法人证件编号" label-align="right" label-class-name="my-label">
            {{ detailInfo.lepCertNo }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="法人名称" label-align="right" label-class-name="my-label">
            {{ detailInfo.lepCertName }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="法人证件有效期" label-align="right" label-class-name="my-label">
            {{ detailInfo.lepCertExpireDate }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="联系人" label-align="right" label-class-name="my-label">
            {{ detailInfo.contactName }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="联系人手机" label-align="right" label-class-name="my-label">
            {{ detailInfo.contactMobile }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="注册资金" label-align="right" label-class-name="my-label">
            {{ detailInfo.registeredCapital }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="备注" label-align="right" label-class-name="my-label">
            {{ detailInfo.remarks }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider/>
    <div class="block-wrap">
      <div class="title">
        <span class="bar"></span>
        <span class="text">账号信息</span>
      </div>
      <div class="content-wrap">
        <el-alert :closable="false" class="mb20" show-icon title="温馨提示：此账号为结算账号(入账账号)" type="info"/>
        <el-descriptions v-if="detailInfo" :column="3" border>
          <el-descriptions-item align="center" label="账号性质" label-align="right" label-class-name="my-label">
            {{ detailInfo.settleAccount.bankAccountType === 1 ? '对公' : '对私' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="银行账号" label-align="right" label-class-name="my-label">
            {{ detailInfo.settleAccount.bankAccountNo }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="账号名称" label-align="right" label-class-name="my-label">
            {{ detailInfo.settleAccount.bankAccountName }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="银行类型" label-align="right" label-class-name="my-label">
            {{ handleFilter(bankOptions, detailInfo.settleAccount.bankCode + '', 'code') }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="开户行" label-align="right" label-class-name="my-label">
            {{ detailInfo.settleAccount.openBank }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="预留手机" label-align="right" label-class-name="my-label">
            {{ detailInfo.settleAccount.mobile || '--' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="证件类型" label-align="right" label-class-name="my-label">
            <dict-tag v-if="detailInfo.settleAccount.accountIdentityType" :options="laiqianle_card_type"
                      :value="detailInfo.settleAccount.accountIdentityType"/>
            <span v-else>--</span>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="持卡人证件号" label-align="right" label-class-name="my-label">
            {{ detailInfo.settleAccount.accountIdentityNo || '--' }}
          </el-descriptions-item>
        </el-descriptions>

        <el-alert v-if="detailInfo.filingAccount.bankAccountNo" :closable="false" class="mb20" show-icon
                  title="温馨提示：此账号为备案账号" type="info"/>
        <el-descriptions v-if="detailInfo.filingAccount.bankAccountNo" :column="3" border>
          <!-- <el-descriptions-item label="结算类型" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
          <!-- <el-descriptions-item label="结算时间点" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
          <!-- <el-descriptions-item label="提现方式" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
          <el-descriptions-item align="center" label="银行账号" label-align="right" label-class-name="my-label">
            {{ detailInfo.filingAccount.bankAccountNo }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="账号名称" label-align="right" label-class-name="my-label">
            {{ detailInfo.filingAccount.bankAccountName }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="银行类型" label-align="right" label-class-name="my-label">
            {{ handleFilter(bankOptions, detailInfo.filingAccount.bankCode + '', 'code') }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label="开户行" label-align="right" label-class-name="my-label">
            {{ detailInfo.filingAccount.openBank }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider/>
    <div class="block-wrap">
      <div class="title">
        <span class="bar"></span>
        <span class="text">支付方式信息</span>
      </div>
      <div class="content-wrap">
        <el-descriptions :column="1" border v-if="detailInfo">
          <el-descriptions-item label="银行卡" label-align="right" align="center" label-class-name="my-label">
            贷记卡费率:{{ detailInfo.cardPay.feeRate }}%；借记卡费率:{{
              detailInfo.cardPay.debitRate
            }}%；借记卡封顶值:{{ detailInfo.cardPay.debitCap }}；
          </el-descriptions-item>
          <el-descriptions-item label="银联" label-align="right" align="center" label-class-name="my-label">
            银联扫码优惠费率:{{ detailInfo.quickPassPay.perferStage.feeRate }}%
          </el-descriptions-item>
          <el-descriptions-item label="微信" label-align="right" align="center" label-class-name="my-label">
            费率:{{ detailInfo.wxPay.feeRate }}%
          </el-descriptions-item>
          <el-descriptions-item label="支付宝" label-align="right" align="center" label-class-name="my-label">
            费率:{{ detailInfo.aliPay.feeRate }}%
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider/>
    <div class="block-wrap">
      <div class="title">
        <span class="bar"></span>
        <span class="text">图片信息</span>
      </div>
      <div class="content-wrap img-wrap">
        <div v-for="(item, index) in detailInfo.fileList" :key="index" class="img-item">
          <div>
            <ImagePreview :height="100" :src="item.path" :width="150"/>
          </div>
          <div class="text">{{ imgName[item.fileTypeId] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
// import { useRoute } from 'vue-router';
import {bankList, businessTypeList, getAreaList, getPost} from '@/api/laiqianle/register';
import {useDict} from '@/utils/dict';
import ImagePreview from '@/components/ImagePreview/index.vue';
// const route = useRoute();

// 字典 laiqianle_register_type 入网类型  laiqianle_card_type 证件类型  laiqianle_license_type 营业执照类型
const dict = ['laiqianle_register_type', 'laiqianle_card_type', 'laiqianle_license_type', 'audit_status'];
const {laiqianle_register_type, laiqianle_card_type, laiqianle_license_type, audit_status} = useDict(...dict);

const props = defineProps({
  detailId: {
    type: String,
    default: '',
  },
});
console.log(props.detailId);
// 图片名称
const imgName = {
  11: '证件正面',
  12: '证件反面',
  15: '营业执照',
  13: '结算账户正面',
  21: '备案账户正面',
  31: '签约协议照片',
  18: '门店照片',
  19: '收银台照片',
  20: '店内商品照片',
  41: '委托入款授权照片',
  24: '法人和入账人手持身份证合照',
  22: '非法人身份证正面',
  23: '非法人身份证反面',
};

// 经营类型
interface BusinessType {
  id: number;
  name: string;
  code: string;
  pcode: string;
  children: BusinessType[];

  [key: string]: any;
}

const businessTypeOptions = ref<BusinessType[]>([]);
const getBusinessTypeList = async () => {
  const {data} = await businessTypeList();
  businessTypeOptions.value = data;
};

// 地址省市区
interface provinces {
  id: number;
  name: string;
  code: string;
  pcode: string;

  [key: string]: any;
}

const provincesList = ref<provinces[]>([]);
const getProvincesList = async () => {
  const {data} = await getAreaList();
  provincesList.value = data;
};

// 银行列表
interface BankOptions {
  id: string;
  name: string;
  code: string;

  [key: string]: any;
}

const bankOptions = ref<BankOptions[]>([]);
const getBankList = async () => {
  const {rows} = await bankList();
  bankOptions.value = rows;
};

// 过滤
const handleFilter = (list, value, code) => {
  const result = list.filter((item) => item[code] === value);
  return result.length ? result[0]?.name || result[0]?.bankName : '';
};

const detailInfo = ref();
const handleDetail = async (id: string) => {
  const {data} = await getPost(id);
  detailInfo.value = data;
};

getProvincesList();
getBusinessTypeList();
await getBankList();
await handleDetail(props.detailId);
</script>

<style lang="scss" scoped>
.img-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  .img-item {
    text-align: center;
    margin-right: 90px;
    margin-bottom: 20px;

    .text {
      margin-top: 6px;
    }
  }
}

.mb20 {
  margin-bottom: 20px;
}

.block-wrap {
  margin-top: 20px;

  .title {
    display: flex;
    align-items: center;

    .bar {
      width: 4px;
      height: 20px;
      background-color: #409eff;
      margin-right: 10px;
    }

    .text {
      font-size: 16px;
      color: #333;
    }
  }

  .content-wrap {
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
    margin-top: 30px;
    min-height: 200px;
  }

  &:deep(.my-label) {
    width: 130px;
    min-width: 100px;
    max-width: 200px;
  }
}
</style>
